<template>
  <div>
    <div class="centerBox">
      <div class="layout-Slide-player cursor">
        <div class="mask" @click="toDetails">点击进入视频</div>
        <d-player ref="player" :options="dplayerOptions"></d-player>
      </div>
      <div class="layout-Slide-nav">
        <div :class="['Slider-flashTab', 'cursor', {active:item.coverPath===currentImgSrc}]" v-for="item in tabList"
             :key="item.id" @click="changeVideo(item)">
          <div class="hoverBox"></div>
          <img v-if="item.coverPath" :src="'http://localhost:8963/'+item.coverPath" alt=""/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import videoApi from "@/api/video";

export default {
  name: "index",
  data() {
    return {
      baseUrl: "http://localhost:8963",
      videoUrl: '',
      tabList: [1, 2, 3, 4, 5, 6],
      currentImgSrc: "",
    };
  },
  computed: {
    dplayerOptions() {
      return {
        theme: '#b7daff',  // 风格颜色，例如播放条，音量条的颜色
        loop: false,  // 是否自动循环
        lang: 'zh-cn',  // 语言，'en', 'zh-cn', 'zh-tw'
        screenshot: false,  // 是否允许截图（按钮），点击可以自动将截图下载到本地
        hotkey: false,  // 是否支持热键，调节音量，播放，暂停等
        volume: 0.7,  // 初始化音量
        autoplay: false,
        video: {
          url: ''
        },
        currentImgSrc: ''
      };
    }
  },
  methods: {
    async getVideoList() {
      let res = await videoApi.getVideoList({
        pageSize: "6",
        sort: "views"
      });

      this.tabList = res.data.results.map(item => {
        let coverPath = item.coverPath;
        coverPath = coverPath.substring(coverPath.lastIndexOf(".") + 1) + "\\" + coverPath;
        item.coverPath = coverPath;
        return item;
      });
      let advanced = res.data.results[0];
      let url = this.baseUrl + "/play/" + advanced.videoPath;
      this.currentImgSrc = advanced.coverPath;
      if (advanced.videoPath) this.switchVideo(url);
    },
    switchVideo(url, pic) {
      let dp = this.$refs.player.dp;
      dp.switchVideo({
        url,
        pic: pic || ""
      });
      dp.play();
    },
    changeVideo(video) {
      this.currentImgSrc = video.coverPath;
      let url = this.baseUrl + "/play/" + video.videoPath;
      this.switchVideo(url);
    },
    toDetails() {
      let nowVideo = this.tabList.filter(item => item.coverPath === this.currentImgSrc)[0];
      this.$router.push({
        name: "details",
        params: {
          videoId: nowVideo.id
        }
      });
    }

  },
  created() {
    this.getVideoList();
  }
};
</script>

<style lang="less" scoped>
.centerBox {
  width: 1158px;
  display: flex;
  margin: 10px auto auto;
  /*视频区域*/
  background-color: rgba(0, 0, 0, .8);

  .layout-Slide-player {
    width: 944px;
    height: 531px;
    border-radius: 10px;
    position: relative;
    /*播放器样式*/

    .dplayer {
      height: 100%;
      border-radius: 10px;

      ::v-deep .dplayer-video {
        width: 100%;
        height: 100%;
      }
    }

    /*蒙版*/

    .mask {
      width: 216px;
      height: 60px;
      border: 2px solid #ff5d23;
      border-radius: 6px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 666;
      line-height: 60px;
      font-size: 20px;
      text-align: center;
      background-color: rgb(255, 93, 35);
      color: white;
      display: none;
    }

    &:hover {
      & > .mask {
        display: block
      }
    }
  }

  /*侧边栏区域*/

  .layout-Slide-nav {
    width: 214px;
    padding: 3px 12px 10px 18px;

    .Slider-flashTab {
      height: 80px;
      padding-top: 3.2%;
      width: 100%;
      border-radius: 4px;
      box-sizing: border-box;
      margin-top: 7px;
      position: relative;

      &:first-child {
        padding-top: 0;
      }

      &[class~="active"] {
        & > .hoverBox {
          display: block;
        }
      }

      .hoverBox {
        width: 100%;
        height: 100%;
        position: absolute;
        border: #ff5d23 4px solid;
        box-sizing: border-box;
        display: none;
      }

      img {
        width: 100%;
        height: 100%;

      }
    }
  }
}
</style>
